<template>
	<view class="quality_testing_page">
		
		<view class="fs40 fwb cor_000">已寄出</view>
		
		<view class="qu_area_block_1">
			
			<view class="up_step_data">
				<view class="up_item_step" :class="item.checked ? 'active' : ''" v-for="(item, index) in stepdata" key="item.id">
					<view class="icon_step_cir"></view>
					<view class="mt10">{{item.name}}</view>
				</view>
			</view>
			
			<view class="mt40">
				
				<view class="express_delivery_step_list">
					
					<view class="item_ex">
						<view class="ex_tag_pos_1">寄</view>
						<view class="fs28 lh44 cor_000">山东省烟台市莱山区迎春大街飞龙天润大厦</view>
						<view class="df aic fs28 lh40">
							<view class="cor_999">谢先生</view>
							<view class="ml20 cor_F52">12345678901</view>
						</view>
					</view>
					
					<view class="item_ex">
						<view class="ex_tag_pos_2">收</view>
						<view class="fs28 lh44 cor_000">山东省烟台市莱山区迎春大街飞龙天润大厦</view>
						<view class="df aic fs28 lh40">
							<view class="cor_999">谢先生</view>
							<view class="ml20 cor_F52">12345678901</view>
						</view>
					</view>
					
				</view>
				
			</view>
			
		</view>
		
		<view class="mt24 qu_area_block_2">
			<view class="pt40 pb40 bb1 flex_box aic">
				<view class="item ov"><view class="fs32 fwb cor_333 clamp_1">商品信息</view></view>
			</view>
			
			<view class="pt32 pb20">
				<view class="flex_box aic">
					<view class="re mr15 fs0"><image src="@/static/images/banner_01.png" class="shop_pic_size"></image></view>
					<view class="item ov">
						<view class="flex_box aic">
							<view class="item ov">
								<view class="fs28 cor_333 clamp_1">塞尔达 荒野之息</view>
							</view>
							<view class="fs24 cor_333">预估</view>
							<view class="fs32 cor_F52 ml10">¥ 238元</view>
						</view>
						<view class="mt15 flex_box aic">
							<view class="item ov">
								<view class="fs24 cor_999 clamp_1">别店购买、原包装完好</view>
							</view>
							<!-- <view class="ml10 fs24 cor_999">X1</view> -->
						</view>
					</view>
				</view>
				
				<view class="mt10 pb10">
					
				
					<view class="pt16 pb16  flex_box aic">
						<view class="fs28 fwb cor_333">订单编号：</view>
						<view class="item ov"><view class="fs24 cor_999">12371278381241649184617372613 [复制]</view></view>
					</view>
					
					<view class="pt16 pb16  flex_box aic">
						<view class="fs28 fwb cor_333">下单时间：</view>
						<view class="item ov"><view class="fs24 cor_999">2025-05-14 15:43:24</view></view>
					</view>
					
					<view class="pt16 pb16  flex_box aic">
						<view class="fs28 fwb cor_333">更新时间：</view>
						<view class="item ov"><view class="fs24 cor_999">2025-05-14 15:43:24</view></view>
					</view>
					
					<view class="pt16 pb24 bb1 flex_box aic">
						<view class="fs28 fwb cor_333">产品描述：</view>
						<view class="item ov"><view class="fs24 cor_999"></view></view>
					</view>
					
					<view class="mt15 bb1">
						<textarea class="textarea_01" placeholder-style="color: #999" placeholder="请简单描述一下产品（200字以内）"></textarea>
					</view>
					
					<view class="mt34">
						<view class="fs28 lh40 cor_333">上传照片</view>
						<view class="mt28 df fw">
							
							<view class="re mr36">
								<image src="@/static/images/icon_close_2.png" class="icon_delete_pos"></image>
								<image src="@/static/images/banner_01.png" class="file_pic_size"></image>
							</view>
							
							<view class="re mr36">
								<image src="@/static/images/icon_close_2.png" class="icon_delete_pos"></image>
								<image src="@/static/images/banner_01.png" class="file_pic_size"></image>
							</view>
							
							<view class="file_pic_btn">
								<image src="@/static/images/icon_10.png" class="img_9"></image>
							</view>
							
						</view>
					</view>
				
				</view>
				
				
				
			</view>
			
		</view>
		
		<view class="cao_btn_fix">
			<view class="next_btn" @click="open">下一步</view>
		</view>
		
		<!-- 弹窗 -->
		<up-popup :show="isShow" mode="bottom"  @close="close" @open="open">
				<view class="popup_content_sty">
					<view class="popup_title">请仔细阅读并承诺</view>
					<view class="popup_scroll_h">
						<view class="fs28 lh48 cor_333">亲爱的用户您好，为了确保下家用户的体验、减少因成色问题引起的误会，若您的游戏外壳、封面有破损脏污或其他瑕疵，请重新选择【裸卡】下单。</view>
						<view class="mt20 fs28 lh48 fwb cor_F52">卖出光盘/卡带的要求</view>
						<view class="mt20 fs28 lh48">
							请确保<text class="">卡带无损、使用完好</text> ，盒子有破损脏污或其他瑕疵的请选择裸卡下单;请确保 <text class="">光盘无划痕、使用完好</text>，盒子无破损，纸封面完好无明显脏污。
						</view>
						<view class="mt32 fs28 lh48 cor_F52">具体判定标准请参者 <text class="">《质检判定标准》</text></view>
						<view class="mt28 up_box_1">特别注意:如果您选择自行邮寄发货后需将发货的快递单号准确的填写到订单中，不填写或填写错误将导致质检人员无法找到您的快递而聊误质检</view>
					</view>
					<view class="mt32 pa24">
						<view class="btn_1">我已阅读并确认</view>
					</view>
				</view>
		</up-popup>
		
		
	</view>
	
	
	
	
	
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow } from "@dcloudio/uni-app";
	
	const stepdata = ref([
		{ id: 0, name: '1.下单', checked: true },
		{ id: 1, name: '2.寄快递', checked: true },
		{ id: 2, name: '3.质检验货', checked: false },
		{ id: 3, name: '4.确认报价', checked: false },
		{ id: 4, name: '5.支付', checked: false }
	]);
	
	const isShow = ref(true); //控制弹窗
	 
	function open() {
	  isShow.value = true;
	};
	  
	function close() { 
	  isShow.value = false;
	}; 
	
</script>

<style lang="scss" scoped>
	
	.quality_testing_page {
		position: relative;
		padding: 32rpx 24rpx;
		min-height: 100vh;
		padding-bottom: calc(156rpx + content(safe-area-inset-bottom));
		padding-bottom: calc(156rpx + env(safe-area-inset-bottom));
		background: linear-gradient(45deg, #FFEEEE 0%, #f6f6f6 90.99%);
		.qu_area_block_1 {
			position: relative;
			padding: 34rpx 0 48rpx;
			border-radius: 16rpx;
			background: linear-gradient(180deg, #FFEEEE 0%, #FFFFFF 70.99%);
			margin-top: 36rpx;
			.express_delivery_step_list {
				position: relative;
				padding: 0 32rpx 0 64rpx;
				.item_ex {
					position: relative;
					padding-left: 48rpx;
					border-left: 2px dashed #999;
					padding-bottom: 96rpx;
					&:last-child { border-color: transparent; padding-bottom: 0; }
					.ex_tag_pos_1,.ex_tag_pos_2 {
						position: absolute;
						top: 0;
						left: -33rpx;
						width: 64rpx;
						height: 64rpx;
						line-height: 64rpx;
						text-align: center;
						font-size: 28rpx;
						color: #fff;
						border-radius: 16rpx;
						z-index: 2;
					}
					
					.ex_tag_pos_1 {
						background-color: #F5220F;
					}
					.ex_tag_pos_2 {
						background-color: #333333;
					}
				}
			}
		}
		.qu_area_block_2 {
			position: relative;
			padding: 0 24rpx 48rpx;
			background-color: #fff;
			border-radius: 16rpx;
		}
		
		.shop_pic_size {
			width: 196rpx;
			height: 120rpx;
			border-radius: 12rpx;
		}
		
		.textarea_01 {
			position: relative;
			display: inline-block;
			padding: 20rpx;
			height: 160rpx;
			font-size: 28rpx;
			color: '#333';
			border: 0;
			background: #fff;
			outline: none;
		}
		
		.file_pic_size {
			position: relative;
			width: 188rpx;
			height: 188rpx;
			border-radius: 8rpx;
			vertical-align: middle;
		}
		
		.icon_delete_pos {
			position: absolute;
			top: -14rpx;
			right: -14rpx;
			width: 28rpx;
			height: 28rpx;
			vertical-align: middle;
			z-index: 2;
		}
		
		.file_pic_btn {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 188rpx;
			height: 188rpx;
			background-color: #FAF5F5;
			border-radius: 8rpx;
		}
		
		.cao_btn_fix {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 24rpx 24rpx calc(24rpx + content(safe-area-inset-bottom)) 24rpx;
			padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom)) 24rpx;
			background-color: #fff;
			z-index: 5;
			.next_btn {
				position: relative;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
				color: #fff;
				background-color: #CECECE;
				border-radius: 16rpx;
			}
		}
		
		.popup_content_sty {
			position: relative;
			padding: 64rpx 24rpx calc(24rpx + content(safe-area-inset-bottom));
			padding: 64rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
			background-color: #fff;
			.popup_title {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 44rpx;
				color: #F5220F;
			}
			.popup_scroll_h {
				position: relative;
				margin-top: 48rpx;
				max-height: 660rpx;
				overflow-y: auto;
			}
			.up_box_1 {
				position: relative;
				padding: 16rpx 20rpx;
				font-size: 24rpx;
				line-height: 32rpx;
				color: #FF594A;
				background-color: #FCEDED;
				border-radius: 12rpx;
			}
			.btn_1 {
				position: relative;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #fff;
				text-align: center;
				border-radius: 16rpx;
				background: #F5220F;
			}
		}
		
	}

</style>
